<script setup>
import {defineModel} from 'vue'
import MarkdownIt from "markdown-it";

const formVal = defineModel("formVal", {
  default: {}
})

const markdown = new MarkdownIt({
  html: true,
  breaks: true
});

</script>

<template>

  <el-container style="height: 100%">
    <el-header style="padding: 0;display: flex;align-items: center;height: 60px">
      <el-text>标题</el-text>
      <el-input
          v-model="formVal.title"
          style="width: 400px;height: 32px"
      />
    </el-header>

    <el-main style="flex-direction: row;display: flex">
      <el-input
          id="knowledge-struct-input-area"
          v-model="formVal.content"
          style="width: 50%;margin: 0 8px 0 8px;height: 100%;"
          type="textarea"
      />
      <div v-html="markdown.render(formVal.content??'')"
           style="border:black 1px solid;width: 50%;margin: 0 8px 0 8px;height: 100%"
      ></div>
    </el-main>
    <el-footer>
      <slot name="footer">

      </slot>

    </el-footer>
  </el-container>
</template>

<style scoped lang="scss">

</style>
<style lang="scss">
#knowledge-struct-input-area {
  height: 100% !important;
}
</style>